<template>
  <!-- 页脚排行榜 -->
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <div class="w-full max-w-[1200px] m-auto p-4 px-0 items-center">
      <!-- 面包屑切换 -->
      <div class="mt-4 mb-4">
        <div
          class="w-full sm:w-min flex space-x-4 p-2 overflow-y-hidden overflow-x-auto bg-[#0f212e] rounded-full"
        >
          <div
            @click="choseTabs(item)"
            class="flex items-center text-sm font-bold"
            :class="active == item.type ? 'active nav-item' : 'nav-item'"
            v-for="item in tabs"
            :key="item"
          >
            {{ $t(item.name) }}
          </div>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table
          v-if="tableData.length > 0"
          class="w-full text-left bg-[#213743]"
          style="table-layout: fixed"
        >
          <thead class="table-header bg-[#1a2c38] text-[#b1bad3] text-sm">
            <tr>
              <th class="p-4 text-left lg:text-center">
                {{ $t("page.table_data.rank") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table_data.nickname") }}
              </th>
              <th class="p-4 text-right lg:text-center">
                {{ $t("page.table_data.amount") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table_data.multiplier") }}
              </th>
              <th class="p-4 text-center hidden lg:table-cell">
                {{ $t("page.table_data.profit") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="table-row bg-[#213743] text-[#b1bad3]"
              v-for="(item, i) in tableData"
              :key="i"
            >
              <td
                class="p-4 text-center text-white font-semibold truncate hidden lg:table-cell"
              >
                {{ i + 1 }}
              </td>
              <td
                class="p-4 text-center text-white font-semibold truncate hidden lg:table-cell"
              >
                {{ item.user_name }}
              </td>
              <td class="p-4 text-right lg:text-center truncate">
                {{ item.bet_amount_total }}
              </td>
              <td class="p-4 text-center truncate hidden lg:table-cell">
                {{ item.factor }}x
              </td>
              <td
                class="p-4 text-center truncate hidden lg:table-cell"
                :class="
                  item.bet_profit_total == 0
                    ? 'text-[#0f212e]'
                    : item.bet_profit_total > 0
                    ? 'text-[#00e701]'
                    : 'text-red-500'
                "
              >
                {{ item.bet_profit_total }}
              </td>
            </tr>
          </tbody>
        </table>
        <el-empty
          v-else
          :image-size="40"
          :description="$t('layer.activity.noData')"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { watch, ref, onMounted, onBeforeUnmount } from "vue";
import { dateTimeZone } from "@/utils/date";
import { mainAct } from "@/store/activeda";
import { useRouter } from "vue-router";
const main = mainAct();
const router = useRouter();

const tableData = ref([]);
const tabs = ref([
  {
    type: "win_list",
    name: "page.navbar.win"
  },

  {
    type: "luck_list",
    name: "page.navbar.luck"
  }
]);
const choseTabs = tab => {
  active.value = tab.type;
  if (!main.isLogin) return;
  switch (tab.type) {
    case "win_list":
      tableData.value = winList.value;
      console.log("win_list", winList.value);
      break;
    default:
      tableData.value = luckList.value;
      console.log("luck_list", luckList.value);
      break;
  }
};
const active = ref("win_list");

let clearTime = ref();
const winList = ref([]);
const luckList = ref([]);
import { eventBus } from "@/utils/eventBus";

onMounted(() => {
  eventBus.on("game_report", data => {
    console.log("⬇⬇   ---> game_report接收到消息 <---   ⬇⬇");
    console.log(data);
    winList.value = data.win_list.filter(item => item.bet_profit_total > 0);
    luckList.value = data.luck_list.filter(item => item.bet_profit_total > 0);
    tableData.value = winList.value;
  });
});

watch(
  () => [winList.value, luckList.value],
  val => {
    if (active.value == "luck_list") {
      tableData.value = val[1];
    } else {
      tableData.value = val[0];
    }
  },
  { deep: true }
);

onBeforeUnmount(() => {
  clearInterval(clearTime.value);
});

const setDefaultImage = url => {
  return url;
};
</script>
<style scoped lang="less">
.btn {
  background-color: #1c2b3a;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.btn:hover {
  background-color: #22303f;
}

.dropdown {
  background-color: #1c2b3a;
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

:deep(.van-pagination__item) {
  border-radius: 5px;
  background-color: #1a2c38;
  padding: 0;

  .btn {
    border: unset;
    outline: unset;
  }
}

:deep(.van-hairline--surround:after) {
  border: unset;
  outline: unset;
}

.nav-item {
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item:hover {
  background-color: #2f4553;
  border-radius: 20px;
}

.nav-item.active {
  background-color: #2f4553;
  border-radius: 20px;
}
.table-row {
  border-radius: 4px;
}
.table-row:nth-child(even) {
  background-color: #1a2c38 !important;
}

.icon_svg {
  width: 20px;
}
</style>
